<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true" :padding=0>
      <div class="header-box" slot="title">
        <b class="flex">
          基础任务
        </b>
      </div>
      <div v-for="i in bloc.itemsArr11" :key="brr(i)">
<!--        <div class="title-label" v-for="(item, index) in i">-->
<!--          <Icon type="md-bookmark" size="20" />-->
<!--          {{mison(item.mission)}}-->
<!--        </div>-->
        <CheckboxGroup size="large" class="item-box" v-model="i.value" style="padding-left: 27%">
          <template v-for="(item,index) in i.data">
            <Checkbox :key="aar(index)" :label="aab(item)" :value="item.state">
              <span>{{ item.mission }}</span>
              <Input
                type="text"
                v-model="item.developValue"
                placeholder="请输入"
                style="width: 400px; height: 40px; "
              />
            </Checkbox>

          </template>
        </CheckboxGroup>
      </div>
    </Card>
    <Card :bordered="false" :dis-hover="true" :padding=0>
      <div class="header-box" slot="title">
        <b class="flex">
          运营任务
        </b>
      </div>
      <div v-for="j in bloc.itemsArr22" :key="brr(j)">
        <!--        <div class="title-label" v-for="(item, index) in i">-->
        <!--          <Icon type="md-bookmark" size="20" />-->
        <!--          {{mison(item.mission)}}-->
        <!--        </div>-->
        <CheckboxGroup size="large" class="item-box" v-model="j.value" style="padding-left: 27%">
          <template v-for="(item,index) in j.data">
            <Checkbox :key="aar(index)" :label="aab(item)">
              <span>{{ item.mission }}</span>
              <Input
                type="text"
                v-model="item.developValue"
                placeholder="请输入"
                style="width: 400px; height: 40px"
              />
            </Checkbox>

          </template>
        </CheckboxGroup>
      </div>
      <div
        style="
          margin: 20px 0px 35px 25px;
          display: flex;
          justify-content: center;
        "
      >
        <Button
          ref="save"
          type="primary"
          style="width: 100px; height: 40px"
          :disabled="bloc.isDetail"
          @click="handleOk()"
        >保存
        </Button>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import { Route } from "vue-router";
    import { FormBloc } from "@/view/rule/FormBloc";
    // import FormRoleModal from "@/view/role/FormRoleModal.vue";
    // import { Role } from "@/base/model/Role";
    // import { deleteRole } from "@/base/api/RoleApi";
    // import { ModalController } from "@/base/util/ModalController";
    import { Button } from "view-design";

    @Component({
        components: {
        },
    })
    export default class FormAddModal extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.load(1,15,'DESC');
            });
        }
        // $refs!: {
        //     // roleForm: FormRoleModal & {
        //     //     bloc: FormRoleBloc;
        //     // };
        //     // delete: Button;
        //     save: Button;
        // };

        brr(a){
            // console.log(a);
            return a.missionId;
        }
        aar(index){
            return index;
        }
        aab(intem){
            // console.log(intem.missionId);
            return intem.missionId;
        }

        //
        // get idx() {
        //     return Number(this.$route.params.id);
        // }

        bloc: FormBloc = new FormBloc();

        // handleCancel() {
        //     this.$router.push({ path: `/role` });
        // }
        //
        handleOk() {
            this.bloc.loading = true;
            this.bloc
                .saveRes()
                .then((res) => {
                    this.$Message.success("保存成功");

                })
                .catch((err) => {
                    this.$Message.error("出现错误");
                })
                .finally(() => {
                    this.bloc.loading = false;
                });
        }

    }
</script>

<style lang="less" scoped>
  .header-box {
    border-bottom: 1px solid #e8eaec;
    display: flex;
    justify-content: space-between;
    align-self: center;
  }

  h3 {
    color: #666;
  }
  span{
    display: inline-block;
    width: 180px;
    margin-left: 5px
  }
  .icon-quanxianguanli {
    height: 50px;
    width: 50px;
    text-align: center;
    display: inline-block;
    line-height: 50px;
    background: #ff6a00;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
  }

  .flex {
    display: flex;
    justify-content: center;
  }

  .flex > div {
    margin: auto 0;
  }

  .form-page .ivu-card-body > div {
    text-align: left;
  }
  .form-page .ivu-card {
    height: 45%;
  }

  .header-box {
    border-bottom: none;
  }

  .title-label {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #e8eaec;
  }

  .title-box {
    padding-left: 20px;
  }

  .item-box > label {
    width: auto;
    margin: 0 35px 15px 0;
  }

  .item-box {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 25px 35px 0;
  }
</style>
